<template>
	<view class="page_all">
		<view class="form_box">
			<view class="item">
				<view class="t_name">门店名称：</view>
				<view class="item_box">
					<view class="_input">
						<input v-model="name"
							:disabled="isShow == 1"
							placeholder="请输入门店名称">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">门店照片：</view>
				<view class="item_box">
					<view class="upload_img"
						@click="selectImg()">
						<image class="pic"
							:src="image"
							v-if="image != ''"></image>
						<view class="icon"
							v-else>+</view>
					</view>
					<view class="upload_tip">建议尺寸：70 * 70px</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">门头照片：</view>
				<view class="item_box">
					<view class="upload_img"
						@click="selectTitleImg()">
						<image class="pic"
							:src="background_image"
							v-if="background_image != ''"></image>
						<view class="icon"
							v-else>+</view>
					</view>
					<view class="upload_tip">建议尺寸：375 * 192px</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">门店区域：</view>
				<view class="item_box">
					<view class="_input">
						<uni-data-select :localdata="regionList"
							placeholder="请选择门店区域"
							mode="none"
							v-model="region_id"
							:disabled="isShow == 1"
							:clear="false" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">营业时间：</view>
				<view class="item_box">
					<view class="_input">
						<view class="text"
							:class="{text_gray: day_time == '', text_gray: isShow == 1}"
							@tap="showTimePopup()">{{day_time == '' ? '请选择营业时间' : day_time}}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">门店手机号：</view>
				<view class="item_box">
					<view class="_input">
						<input type="number"
							:disabled="isShow == 1"
							v-model="phone"
							maxlength="11"
							placeholder="请输入门店手机号">
					</view>
				</view>
			</view>

			<view class="item">
				<view class="t_name">门店地址：</view>
				<view class="item_box">
					<view class="_input">
						<view class="text "
							:class="{text_gray: addressSelect == '',  text_gray: isShow == 1}"
							@tap="showAddress()">{{addressSelect == '' ? '请选择门店地址' : addressSelect}}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">门店详细地址：</view>
				<view class="item_box">
					<view class="_input">
						<input v-model="detailed_address"
							:disabled="isShow == 1"
							placeholder="请输入门店详细地址">
					</view>
				</view>
			</view>
			<view class="item"
				v-if="isShow != 1">
				<view class="t_name">上传营业执照自动识别信息：</view>
				<view class="item_box">
					<view class="upload_btn">
						<button @click="uploadFileBtn">上传营业执照</button>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">法人姓名：</view>
				<view class="item_box">
					<view class="_input">
						<input v-model="legal_person"
							:disabled="isShow == 1"
							placeholder="请输入法人姓名">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">工商注册名：</view>
				<view class="item_box">
					<view class="_input">
						<input v-model="real_name"
							:disabled="isShow == 1"
							placeholder="请输入工商注册名">
					</view>
				</view>
			</view>
			<view class="item">
				<view class="t_name">社会统一信用代码：</view>
				<view class="item_box">
					<view class="_input">
						<input v-model="companyid"
							:disabled="isShow == 1"
							placeholder="请输入社会统一信用代码">
					</view>
				</view>
			</view>

			<view class="save_btn"
				v-if="isShow == 0"
				@click="saveBtn">确定申请</view>
		</view>

		<!-- 选择时间 -->
		<uni-popup ref="timePopup"
			type="bottom">
			<smh-time-range @confrim="confrimTime"
				@cancel="closeTimePopup"></smh-time-range>
		</uni-popup>

		<!-- 选择地址 -->
		<areaWindow ref="areaWindow"
			:display="display"
			:address="addressInfo"
			@submit="OnChangeAddress"
			@changeClose="changeClose"></areaWindow>
	</view>
</template>

<script>
	import {
		getAddressDetail,
		getStoreAllRegion,
		addStoreInfo,
		getStoreInfo
	} from '@/api/user.js';

	import {
		getCityData
	} from '@/api/api.js';

	import areaWindow from '@/components/areaWindow';
	export default {
		components: {
			areaWindow,
		},
		data() {
			return {
				isShow: 0, //是否审核通过 默认0  1：审核通过
				id: 0,

				name: '', // 门店名称
				image: '', //门店照片
				background_image: '', // 门头照片

				regionList: [],
				region_id: '', // 门店区域

				day_time: '', // 营业时间
				phone: '', //门店手机号

				addressSelect: '', // 门店选择地址
				display: false,
				addressList: [],
				addressInfo: [],

				detailed_address: '', // 详细地址

				legal_person: '', // 法人姓名
				real_name: '', // 工商注册名
				companyid: '', //社会统一信用代码
			}
		},


		async created() {
			uni.showLoading({
				title: '加载中'
			})

			await this.getShopInfo()
			this.getRegionList()

			uni.hideLoading()
		},

		methods: {
			getShopInfo() {
				getStoreInfo().then(async res => {
					console.log(res)
					if (res?.data?.id) {
						let day_time = `${res.data.day_start.slice(0, 5)}-${res.data.day_end.slice(0, 5)}`


						this.id = res.data.id
						this.name = res.data.name
						this.image = res.data.image
						this.background_image = res.data.background_image
						this.region_id = res.data.region_id
						this.phone = res.data.phone
						this.addressSelect = res.data.address
						this.legal_person = res.data.legal_person
						this.real_name = res.data.real_name
						this.companyid = res.data.companyid
						this.detailed_address = res.data.detailed_address
						this.day_time = day_time

						this.isShow = res.data.is_show

						let id1 = await this.getUserAddress(0, res.data.province)
						let id2 = await this.getUserAddress(res.data.province, res.data.city)
						let id3 = await this.getUserAddress(res.data.city, res.data.area)
						let id4 = await this.getUserAddress(res.data.area, res.data.street)

						this.addressInfo = [id1, id2, id3, id4]
					}
				})
			},

			getRegionList() {
				let that = this
				getStoreAllRegion().then(res => {
					this.regionList = res.data.map(item => {
						return {
							text: item.name,
							value: item.id
						}
					})
				})

			},

			// 获取省市区地址
			getUserAddress(pid, id) {
				return new Promise((resolve) => {
					getCityData(pid).then(res => {
						const info = res.data.filter(item => item.id == id)[0]
						resolve(info)
					});
				})

			},



			// 选择图片
			selectImg() {
				if (this.isShow == 1) {
					return
				}

				this.$util.uploadImageChange({ count: 1, url: 'upload/image' }, (res) => {
					this.image = res.data.url
				});
			},

			// 选择图片
			selectTitleImg() {
				if (this.isShow == 1) {
					return
				}

				this.$util.uploadImageChange({ count: 1, url: 'upload/image' }, (res) => {
					this.background_image = res.data.url
				});
			},

			// 展开时间选择
			showTimePopup() {
				if (this.isShow == 1) {
					return
				}

				this.$refs.timePopup.open()
			},

			// 关闭时间选择
			closeTimePopup() {
				this.$refs.timePopup.close()
			},

			confrimTime(data) {
				this.day_time = data.time
				console.log(data)
				this.closeTimePopup()
			},

			// 展示省市区选择
			showAddress() {
				if (this.isShow == 1) {
					return
				}

				this.display = true
			},

			// 关闭省市区选择
			changeClose: function() {
				this.display = false
			},

			// 确认省市区选择
			OnChangeAddress(address) {
				this.addressInfo = address;
				this.addressSelect = address.map(v => v.label).join('');
			},

			// 上传营业执照
			uploadFileBtn() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const path = res.tempFilePaths[0];
						uni.getFileSystemManager().readFile({
							filePath: path,
							encoding: 'base64',
							success: async (data) => {
								const base64 = data.data;
								const token = await this.getOCRToken()
								const info = await this.getOCRInfo(token, base64)

								that.legal_person = info['法人'].words
								that.real_name = info['单位名称'].words
								that.companyid = info['社会信用代码'].words
							}
						});
					}
				});


			},

			// 获取百度OCRtoken
			getOCRToken() {
				const tokenUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=RTprDFQzINUt3XYWt8h71x6a&client_secret=kSFzIoSFO5YUXrXnsawt4Pd3a1wSlLXd`

				return new Promise((resolve, reject) => {
					uni.request({
						url: tokenUrl,
						method: 'POST',
						data: {},
						success: (res) => {
							resolve(res.data.access_token)
						},
						fail: () => {
							this.toast("获取数据失败")
							reject(false)
						}
					});
				})
			},

			// 获取营业执照信息
			getOCRInfo(token, base64) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: {
							access_token: token,
							image: base64
						},
						success: (res) => {
							resolve(res.data.words_result)
						},

						fail: () => {
							this.toast("获取营业执照信息失败")
							reject(false)
						}
					});
				})
			},


			saveBtn() {
				const {
					name,
					image,
					background_image,
					region_id,
					day_time,
					phone,
					addressInfo,
					addressSelect,
					detailed_address,
					legal_person,
					real_name,
					companyid
				} = this


				if (name == '') {
					this.toast("请输入门店名称")
					return
				}

				if (image == '') {
					this.toast("请上传门店照片")
					return
				}

				if (background_image == '') {
					this.toast("请上传门头照片")
					return
				}

				if (region_id == '') {
					this.toast("请选择门店区域")
					return
				}

				if (day_time == '') {
					this.toast("请选择营业时间")
					return
				}

				if (phone.length < 11) {
					this.toast("请输入正确的手机号")
					return
				}

				if (addressSelect == '') {
					this.toast("请选择门店地址")
					return
				}

				if (detailed_address == '') {
					this.toast("请输入门店详细地址")
					return
				}

				if (legal_person == '') {
					this.toast("请输入法人姓名")
					return
				}

				if (real_name == '') {
					this.toast("请输入工商注册名")
					return
				}

				if (companyid == '') {
					this.toast("请输入社会统一信用代码")
					return
				}

				this.saveApi()
			},

			saveApi() {
				const {
					id,
					name,
					image,
					background_image,
					region_id,
					day_time,
					phone,
					addressInfo,
					addressSelect,
					detailed_address,
					legal_person,
					real_name,
					companyid
				} = this

				let d_list = day_time.split('-')
				let dayTimeList = ['', '']
				dayTimeList[0] = d_list[0] + ':00'
				dayTimeList[1] = d_list[1] + ':00'

				let data = {
					id: id,

					name: name,
					phone: phone,

					region_id: region_id,

					address: addressSelect,
					province: addressInfo[0].id,
					city: addressInfo[1].id,
					area: addressInfo[2].id,
					street: addressInfo[3].id,
					detailed_address: detailed_address,

					image: image,
					background_image: background_image,

					day_time: dayTimeList,

					real_name: real_name,
					companyid: companyid,
					legal_person: legal_person,
				}

				addStoreInfo(data).then(res => {
					if (res.status == 200) {
						this.toast("申请成功")
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},

			toast(title) {
				uni.showToast({
					title,
					icon: "none"
				})
			},
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/ .uni-stat-box {
		background-color: transparent !important;
	}

	/deep/ .uni-select {
		padding-left: 0 !important;
		hieght: 80rpx !important;
		color: #333 !important;
		font-size: 28rpx !important;
	}

	/deep/ .uni-select--disabled {
		padding-left: 0 !important;
		hieght: 80rpx !important;
		color: #aaa !important;
		font-size: 28rpx !important;

		.uni-select__input-text {
			color: #aaa !important;
		}
	}

	/deep/ .uni-select__input-placeholder {
		color: #aaa !important;
		font-size: 28rpx !important;
	}

	/deep/ .uni-select--disabled {
		background-color: transparent !important;
		border: none !important;
	}

	/deep/ .uni-select {
		border: none !important;
		height: 80rpx;
	}

	page {
		background-color: #fff;
	}

	view {
		box-sizing: border-box;
	}

	input::-webkit-input-placeholder {
		color: #999;
	}

	.page_all {
		padding-bottom: 30rpx;

		.form_box {
			width: 100%;
			padding: 30rpx;

			.item {
				width: 100%;
				margin-bottom: 30rpx;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 10rpx;

				.t_name {
					font-size: 28rpx;
					color: #333;
				}

				.item_box {
					width: 100%;
					margin-top: 20rpx;
					font-size: 28rpx;


					._input {
						width: 100%;
						height: 80rpx;
						border: 1rpx solid #c6c6c6;
						border-radius: 10rpx;
						padding: 0 20rpx;
						position: relative;


						input {
							width: calc(100% - 40rpx);
							height: 80rpx;
							background-color: transparent;
							font-size: 28rpx;
							padding: 0 20rpx;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);

						}

						.text {
							width: 100%;
							height: 80rpx;
							line-height: 80rpx;
							font-size: 28rpx;

							&.text_gray {
								color: #aaa;
							}
						}
					}

					.upload_img {
						width: 200rpx;
						height: 200rpx;
						border: 1rpx solid #c6c6c6;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.pic {
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}

						.icon {
							font-size: 60rpx;
							color: #c6c6c6;
						}

					}

					.upload_tip {
						color: #999;
						margin-top: 20rpx;
						font-size: 24rpx;
					}

					.upload_btn {
						button {
							width: 220rpx;
							height: 80rpx;
							line-height: 80rpx;
							background-color: rgb(18, 165, 0);
							color: #fff;
							font-size: 28rpx;
							text-align: center;
							border-radius: 10rpx;
						}
					}
				}
			}

			.save_btn {
				width: 690rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: rgb(233, 51, 35);
				border-radius: 40rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				margin: 30rpx auto 0;
			}
		}
	}
</style>